<div>
<style>
    .is-danger {
        color: red
    }
</style>
<form id="form" @submit.prevent="validateBeforeSubmit">
    <div class="form-group">
        <label>日期</label>
        <input type="date" class="form-control" v-model="date" name="date" v-validate="'required'" />
        <span v-show="errors.has('date')" class="help is-danger">{{ errors.first('date') }}</span>
    </div>
    <div class="form-group">
        <label>代理公司</label>
        <select class="form-control" v-model="proxy_company">
            <?php foreach ($this->params['list'] as $v): ?>
            <option value=<?php echo $v['id']; ?>><?php echo $v['name']; ?></option>
            <?php endforeach;?>
        </select>
    </div>

    <div class="form-group">
        <label>客户名称</label>
        <input type="text" class="form-control" v-model="customer_name" name="customer_name" v-validate="'required'" />
        <span v-show="errors.has('customer_name')" class="help is-danger">{{ errors.first('customer_name') }}</span>
    </div>

    <div class="form-group">
        <label>客户编号</label>
        <input type="text" class="form-control" v-model="customer_num" />
    </div>

    <div class="form-group">
        <label>invoice</label>
        <input type="text" class="form-control" v-model="invoice" name="invoice" v-validate="'required'" />
        <span v-show="errors.has('invoice')" class="help is-danger">{{ errors.first('invoice') }}</span>
    </div>

    <div class="form-group">
        <label>进仓编号</label>
        <input type="text" class="form-control" v-model="order_num" name="order_num" v-validate="'required'" />
        <span v-show="errors.has('order_num')" class="help is-danger">{{ errors.first('order_num') }}</span>
    </div>

    <div class="form-group">
        <label>数量</label>
        <input type="number" class="form-control" v-model="num" />
    </div>

    <div class="form-group">
        <label>体积</label>
        <input type="number" class="form-control" v-model="volume" />
    </div>

    <div class="form-group">
        <label>运费</label>
        <input type="number" class="form-control" v-model="ship_fee" />
    </div>

    <div class="form-group">
        <label>进仓费</label>
        <input type="number" class="form-control" v-model="in_repo_fee" />
    </div>

    <div class="form-group">
        <label>总计</label>
        <input type="text" class="form-control" v-model="total_fee" />
    </div>

    <div class="form-group">
        <label>备注</label>
        <input type="text" class="form-control" v-model="remark" />
    </div>
    <button class="btn btn-success">添加</button>
</form>
<script>
    console.log(111);
    console.log(VeeValidate);
    Vue.use(VeeValidate);
    new Vue({
        el: "#form",
        data: {
            date: "",
            order_num: "",
            num: "",
            volume: "",
            ship_fee: 0.00,
            in_repo_fee: 0.00,
            total_fee: 0.00,
            customer_num: "",
            customer_name: "",
            invoice: "",
            remark: "",
            proxy_company: 1

        },
        methods: {
            validateBeforeSubmit: function() {
                this.$validator.validateAll().then((res) => {
                    if (res) {
                        var url = '/table/add_inland'
                        $.post(url,{data:this.$data},function(res){
                            if(res.code==1){
                                layer.confirm(res.msg,{},function(){
                                    window.location.reload();
                                })
                            }else{
                                layer.alert(res.msg);
                            }
                        },'json')
                    }
                })
            }
        }
    })
</script>
</div>